<template>
  <div>
    <div class="text-gray" style="margin-left: 15px">
      注：按网站配置标签支持选择，该站最多支持3个标签。
    </div>
    <div class="table-body text-gray bold fs-md">
      <div class="header-title d-flex">
        <div class="flex-1 cell-item">平台名称</div>
        <div class="flex-2 cell-item">平台标签</div>
        <div class="flex-1 cell-item">操作</div>
      </div>
      <div class="d-flex">
        <div class="flex-1 cell-item">{{portType | getPortTypeName}}</div>
        <div class="flex-2 cell-item">
          <el-tag v-for="(item, i) in portTags" :key="i" type="success" effect="dark" class="mw5">{{
            item
          }}</el-tag>
        </div>
        <div class="flex-1 cell-item">
          <el-button size="mini" type="text" @click="tagPopVisible = true">配置标签</el-button>
        </div>
      </div>
    </div>

    <com-set-tag
      title="安居客三网合一标签配置"
      :protTagOptions="protTagOptions"
      :portTags.sync="portTags"
      :dialogVisible.sync="tagPopVisible"
    ></com-set-tag>
  </div>
</template>
<script>
import comSetTag from "../dialog/com-set-tag";
import { protTagOptions } from "@/config/portTag";
import mixinMethods from '@/utils/mixinMethods';

export default {
  name: 'ComPortTag',
  components: {
    comSetTag,
  },
  props: {
    value: String,
    portType: String,
  },
  data() {
    return {
      protTagOptions: Object.freeze(protTagOptions),
      tagPopVisible: false, //标签配置弹层
      portTags: this.portTagsFormat(this.value)
    };
  },
  created() {},
  mounted() {},
  watch: {
    portTags(val) {
      let v = this.getPortTagValue('text', val).join(',')
      this.$emit('input', v)
    },
  },
  computed: {},
  methods: {
    portTagsFormat(str) {
      let tags = (str || "").split(",").filter((v) => !!v);
      const portTags = mixinMethods.getPortTagValue("value", tags);
      return portTags
    }
  },
};
</script>
<style scoped></style>
